<template>
  <div class="system-dic-container">
    <el-card shadow="hover">
      <div class="system-user-search mb15">
        <el-form :model="tableData.param" ref="queryRef" :inline="true" label-width="80px">
          <el-form-item label="email地址:" prop="email">
            <el-input v-model="tableData.param.email" placeholder="请输入email地址" clearable size="default"
                      @keyup.enter.native="dataList" />
          </el-form-item>
          <el-form-item label="用户名称:" prop="name">
            <el-input v-model="tableData.param.name" placeholder="请输入用户名称" clearable size="default"
                      @keyup.enter.native="dataList" />
          </el-form-item>
          <!--          <el-form-item label="状态" prop="status" style="width: 200px;">
            <el-select
                v-model="tableData.param.status"
                placeholder="状态"
                clearable
                size="default"
                style="width: 240px"
            >
              <el-option label="启用"  :value="0"/>
              <el-option label="禁用"  :value="1"/>
            </el-select>

          </el-form-item>-->
          <el-form-item>
            <el-button size="default" type="primary" class="ml10" @click="dataList">
              <el-icon>
                <ele-Search />
              </el-icon>
              查询
            </el-button>
            <el-button size="default" @click="resetQuery(queryRef)">
              <el-icon>
                <ele-Refresh />
              </el-icon>
              重置
            </el-button>
            <el-button v-if="tableData.param.status=='0'" size="default" type="success" class="ml10"
                       @click="addArticle">
              <el-icon>
                <ele-FolderAdd />
              </el-icon>
              新增
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="tableData.data" style="width: 100%">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="id" align="center" prop="id" />
        <el-table-column label="邮件地址" align="center" prop="email" :show-overflow-tooltip="true" />
        <!-- <el-table-column label="公司名称" align="center" prop="name" :show-overflow-tooltip="true">
          <template #default="scope">
            <el-image style="width: 120px; height: 80px" :src="scope.row.titleUrl" />
          </template>
        </el-table-column> -->
        <el-table-column label="用户名称" align="center" prop="name" :show-overflow-tooltip="true" />
        <el-table-column label="公司名称" align="center" prop="companyName" :show-overflow-tooltip="true" />
        <el-table-column label="状态" align="center" prop="status" :show-overflow-tooltip="true">
          <template #default="scope">
            <el-tag type="success" v-if="!scope.row.status">启用</el-tag>
            <el-tag type="info" v-else>删除</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createdAt" width="200" />
        <el-table-column label="操作" width="240">
          <template #default="scope">
            <el-button size="small" type="text" @click="onOpenEditDic(scope.row)">编辑</el-button>
            <el-button size="small" type="text" v-if="!scope.row.status" @click="onDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="tableData.total>0" :total="tableData.total" v-model:page="tableData.param.pageNum"
                  v-model:limit="tableData.param.pageSize" @pagination="dataList" />
    </el-card>

  </div>
</template>

<script lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { toRefs, reactive, onMounted, ref, defineComponent, unref, getCurrentInstance } from 'vue';
import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
import EditConfig from '/@/views/system/config/component/editConfig.vue';
import { deleteConfig, getConfigList } from '/@/api/system/config';
import { downloadCollection, editCollectionList, getCollectionList } from '/@/api/system/collection';
import { getEmailCompanyList } from '/@/api/system/mailtmpCompany';
import { deleteArticle, getArticleList, openArticle } from '/@/api/system/article';

// 定义接口来定义对象的类型
interface TableDataRow {
	id: number;
	uid: string;
	title: string;
	category: number;
	display: string;
	content: string;
	status: number;
	createdAt: string;
}

interface TableDataState {
	ids: number[];
	tableData: {
		data: Array<TableDataRow>;
		total: number;
		loading: boolean;
		param: {
			pageNum: number;
			pageSize: number;
			email: string;
			name: string;
			status: string;
		};
	};
}

export default defineComponent({
	name: 'apiV1ArticleDataList',
	components: { EditConfig },
	setup() {
		const { proxy } = getCurrentInstance() as any;
		const route = useRoute();
		const queryRef = ref();
		const { sys_yes_no } = proxy.useDict('sys_yes_no');

		const router = useRouter();
		const urlCopyRef = ref();

		const state = reactive<TableDataState>({
			ids: [],
			tableData: {
				data: [],
				total: 0,
				loading: false,
				param: {
					email: '',
					name: '',
					status: '',
					pageNum: 1,
					pageSize: 10,
				},
			},
		});
		// 初始化表格数据
		const initTableData = () => {
			const path = route.path as string;
			state.tableData.param.status = '0';

			if (path == '/system/article/recovery') {
				state.tableData.param.status = '1';
			}

			dataList();
		};

		const dataList = () => {
			// console.log('dataList', state.tableData.param);
			getEmailCompanyList(state.tableData.param).then((res: any) => {
				state.tableData.data = res.data.list;
				state.tableData.total = res.data.total;
			});
		};

		/** 重置按钮操作 */
		const resetQuery = (formEl: FormInstance | undefined) => {
			if (!formEl) return;
			formEl.resetFields();
			dataList();
		};

		const onDelete = (row: TableDataRow) => {
			deleteArticle(row.id).then((res: any) => {
				ElMessage.success('禁用文章');
				initTableData();
			});
		};

		const onOpen = (row: TableDataRow) => {
			openArticle(row.id).then((res: any) => {
				ElMessage.success('启用文章');
				initTableData();
			});
		};

		// 页面加载时
		onMounted(() => {
			initTableData();
		});

		const onOpenEditDic = (row: TableDataRow) => {
			router.push({ path: '/system/mailtmp/companyListAdd', query: { id: row.id } });
		};

		const addArticle = () => {
			router.push({ path: '/system/mailtmp/companyListAdd' });
		};

		const onPreview = (row: TableDataRow) => {
			let href = import.meta.env.VITE_API_URL + '/view/article/detail?uid=' + row.uid;
			window.open(href, '_blank');
		};

		const onCopy = (row: TableDataRow) => {
			let urlStr = import.meta.env.VITE_API_URL + '/view/article/detail?uid=' + row.uid;
			var input = document.createElement('input');
			input.value = urlStr;
			document.body.appendChild(input);
			input.select();
			document.execCommand('Copy');
			document.body.removeChild(input);
			//urlCopyRef.value.openDialog(urlStr);
			ElMessage.success('复制成功');
		};

		return {
			onOpen,
			queryRef,
			addArticle,
			onOpenEditDic,
			onDelete,
			resetQuery,
			onPreview,
			onCopy,
			urlCopyRef,
			sys_yes_no,
			dataList,
			...toRefs(state),
		};
	},
});
</script>
